<!--
 * @description  : 市管-零售户或者无证户选择页
 * @descriptionDetail: 市管-零售户或者无证户选择页
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-07-09 18:43:02
-->
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<view @tap="handlerSure">
					确定
				</view>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="nolicence-search-lay">
			<u-search shape="round" :clearabled="true" :showAction="true" actionText="确定" :animation="true" :placeholder="placeholder" v-model="keyword" @custom="handlerSearch"></u-search>
		</view>
		<me-table :i="0" :top="112" :index="0" :init-load="false" :load-data="loadData" ref="mescrollItem0">
			<template #default="d">
				<view class="card">
					<u-row @tap="handlerSelectItem(d.data)">
						<u-col span="10">
							<client-item :client="d.data"></client-item>
						</u-col>
						<u-col span="2" style="text-align:right;">
							<u-icon name="checkbox-mark" color="#2979ff" size="38" style="margin-right: 10px;" v-if="selectedUids.includes(d.data.retailerUuid)"></u-icon>
						</u-col>
					</u-row>
				</view>
			</template>
		</me-table>
		<view class="submit-btns btn-other-cls" v-if="type == 'nolicences'">
			<u-button class="u-btn" type="primary" @click="addNolicenPerson">
				添加
			</u-button>
		</view>
	</view>
</template>

<script>
	import MeTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import ClientItem from './components/client-item.vue';
	import checkCheckService from "@/service/check/check.service";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			MeTable,
			ClientItem,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				keyword: "",
				selectedUids: [], // 选中项的ids
				selectedItems: [], // 选中项
				type: "retailer", // retailer 零售户  nolicences 1 无证户
				objInfo: {},
				placeholder: "",
				L_SUBJECT_TYPE: this.$u.dic.getDicByKeyCode(this.$u.dic.DIC_KEYS.L_SUBJECT_TYPE),
				addStatus: false, // 控制新增无证户返回状态
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		onShow() {
			if (this.addStatus) {
				this.$refs['mescrollItem0'].refresh();
				this.addStatus = false;
			}
		},
		onLoad(option) {
			this.showDefaultTitle = false;
			this.type = option.type;
			this.objInfo = this.getRouteParam();
			this.updateMixinTitle(this.type == 'retailer' ? '选择零售户' : '选择无证户');

			this.placeholder = this.type == 'retailer' ? "输入名称/零售户姓名/许可证号" : "输入名称/无证户姓名/电话";
		},

		methods: {
			setRightBtns() {
				// #ifdef H5-DINGDING
				// 先放开右侧标题
				this.$deviceApi.setRight("确定", () => {
					// 添加日计划操作
					this.handlerSure();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerSure();
				}
			},
			handlerSearch() {
				this.$refs['mescrollItem0'].refresh();
			},
			// 选中
			handlerSelectItem(item) {
				this.selectedUids = [item.retailerUuid, ];
				this.selectedItems = [item, ];
			},
			// 在线案件查询数据
			loadData(page) {
				// 调用后台接口查询数据：分页参数page.size, page.num
				let param = {};
				if (this.type == 'retailer') { // 零售户
					param = {
						page: page.num,
						limit: page.size,
						planUuid: this.objInfo.planUuid,
						orgUuid: this.objInfo.orgUuid,
						taskSubject: this.L_SUBJECT_TYPE[0].bcbCode,
						areaOrgUuids: this.objInfo.areaOrgUuids,
						keyWord: this.keyword,
					};
				} else { // 无证户
					param = {
						page: page.num,
						limit: page.size,
						planUuid: this.objInfo.planUuid,
						orgUuid: this.objInfo.orgUuid,
						taskSubject: this.L_SUBJECT_TYPE[1].bcbCode,
						areaOrgUuids: this.objInfo.areaOrgUuids,
						keyWord: this.keyword,
					};
				}
				return new Promise((resolve) => {
					checkCheckService.checkClientList(param).then(res => {
						if (res.success) {
							resolve({
								count: res.count,
								data: [...res.data, ],
							});
						} else {
							resolve({
								count: 0,
								data: [],
							})
						}
					}).catch(err => {
						resolve({
							count: 0,
							data: [],
						});
					});
				})
			},
			addNolicenPerson() {
				this.addStatus = true;
				let param = {
					areaOrgUuids: this.objInfo.areaOrgUuids,
					polygonArea: this.objInfo.polygonArea,
				}
				this.setRouteParam(param);
				this.$u.route('/pages/mprEvaluation/add/addNolicence');
			},
			// 确定
			handlerSure() {
				let self = this;
				// 零售户添加
				if (this.selectedItems.length == 0) {
					this.$u.toast("请选择零售户");
					return;
				}
				// TODO 直接跳转到 考核计划检查页面
				this.setRouteParam({
					...this.selectedItems[0],
					...this.objInfo,
				});
				this.$u.route({
					url: "pages/mprEvaluation/mprEvaluationCheck",
					type: "redirect",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/style/common/rightMenu.scss";

	.page {
		padding: 0;
	}

	.u-page {
		padding-bottom: 100rpx;
	}

	.nolicence-search-lay {
		background-color: #fff;
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 999;
		width: 100%;
		overflow: hidden;
		padding: $cm-search-padding-row $cm-search-padding-column;
	}

	.sticky-header {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		width: 100%;
		margin: auto;
		padding-left: 2.5%;
		padding-right: 2.5%;
		line-height: 40px;
		height: 40px;
		z-index: 999;
		padding: $cm-search-padding-row $cm-search-padding-column;
	}
</style>
